<template>
    <div>
        <!-- type="border-card" -->
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane v-if="activitySummarize" :lazy="true" :name="TABSNAME.ActivitySummarize"
                :label="TABSNAME.ActivitySummarize">
                <ActivitySummarize :data="data"></ActivitySummarize>
            </el-tab-pane>
            <el-tab-pane v-if="activityUserSummarize" :lazy="true" :name="TABSNAME.ActivityUserSummarize"
                :label="TABSNAME.ActivityUserSummarize">
                <ActivityUserSummarize :data="data" :userId="userId"></ActivityUserSummarize>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import ActivitySummarize from "./activitySummarize.vue";
import ActivityUserSummarize from "./activityUserSummarize.vue";

const p = defineProps<{ data: Studycodemodel.Iactivity, activitySummarize: boolean, activityUserSummarize: boolean, userId?: number }>()

enum TABSNAME { ActivitySummarize = "比赛分析", ActivityUserSummarize = "比赛成员分析", }

const router = useRouter()
const route = useRoute()
const store = useStore(Storekey)
const user = computed<Studycodemodel.Iuser>(() => {
    return store.getters.getuser;
});
const teamId = computed(() => {
    return user.value?.teamid
})

const activeName = ref(TABSNAME.ActivitySummarize); // 先给一个默认值
onMounted(() => {
    if (p.activitySummarize) {
        activeName.value = TABSNAME.ActivitySummarize;
    } else if (p.activityUserSummarize) {
        activeName.value = TABSNAME.ActivityUserSummarize;
    }
});

</script>

<style scoped>
.router-link-active {
    color: cadetblue;
}
</style>